<template>
  <div class="clearfix sel-group">
      <div class="sel-item" v-for="(item,index) in value[teamIndex]"  :key="index">
        <el-select filterable clearable v-model="value[teamIndex][index]" >
          <el-option
            v-for="team in race_cup_teams"
            :key="team.value"
            :label="team.label"
            :value="team.value"
            :disabled="include(team.value)"
            :placeholder="'请选择参赛者'">
          </el-option>
        </el-select>
      </div>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
export default {
  props: {
    value: {
      type: Array,
      default () {
        return []
      }
    },
    teamIndex: {
      type: Number
    }
  },
  computed: {
    ...mapGetters({
      race_cup_teams: 'race_cup_teams'
    })
  },
  watch: {
  },
  data () {
    // let value = this.groupList
    return {
      teamList: [],
      selected: {}
    }
  },
  methods: {
    handleChange (index, val) {
      // debugger
      this.$emit('valueChange', {
        index: index
      })
    },
    handleClear (index) {
      this.$emit('clear', {
        index: index
      })
    },
    include (value) {
      let ret = false
      this.value.forEach(item => {
        item.forEach(item2 => {
          if (item2 === value) {
            ret = true
          }
        })
      })
      return ret
    }
  }
}
</script>

<style scoped> 
.sel-item{
  width:191px;
  margin:0 10px 16px 0;
  float: left;
}
.sel-group .sel-item:nth-child(4n){
  margin-right:0;
}
.el-select-dropdown__item.is-disabled{
  display: none;
}
</style>
